<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <script type="text/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
    <link rel="shortcut icon" th:href="@{/ico/blackLogo.ico}" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/css/main.css}" />
</head>
<body>

<audio loop="loop"  autoplay="autoplay" preload="auto"  id="bgm">
    <source th:src="@{/music/Timetravel.mp3}" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>
<!--遮盖层-->
<div id="cover" ></div>
<!--规则-->
<div id="rule">
    <div id="heng"><span>这是规则。右边关掉☞</span><span class="guanbi">✘</span></div>
    游戏规则简介：<br><br>
    1. 每名玩家各选一套21颗颜色棋子，轮流放进棋盘，游戏目标是尽量在棋盘内填上最多数目的棋子。<br><br>
    2. 玩家的第一颗棋子必须放在棋盘角尖位置，每个棋子只能与<strong>同色棋子的棋角</strong>相连，不允许沿<strong>同色棋子棋边</strong>贴着摆放。
    不一样颜色棋子只是不能覆盖而已！！
    <img style="width: 300px;height:300px" th:src="@{/images/mainbackp.png}"/>
    <br><br>
    3. 因为每颗棋子形状都不同，每一步都需准确计算，所以不能只埋头放置自己的棋子，还必须有效阻止对手。<br>
    <strong>到最后谁都不能放棋子了，谁剩的棋子的格子数少就赢了!</strong>
    <br>
    4. 每一局都是与别不同，无穷无尽的策略性游戏棋，适合两到四人对奕.
    是一款规则可以在半分钟就讲清楚的游戏，属于易学难精型，四人一起玩比两个人激烈好玩很多。<br><br>
    5.两人游戏规则一样的!<br><br>
</div>
<!--开发人员-->
<div id="Developer">
    <div id="heng"><span>这是开发人员。右边关掉☞</span><span class="guanbi">✘</span></div>
    开发人员：<br><br>
    小组成员均为软件班学生，均有软件开发的实力。
    小组成员张颢、田小锋，获得了蓝桥杯编程大赛国家
    三等奖、二等奖和天梯赛团体省级二等奖。平时喜欢研究一些程序算法问题，
    编程能力较强。<br><br>
    小组成员赵丝蕊、李成宇、张颢、田小锋Java基础知识扎实，
    一定的开发基础，熟悉Web项目，组织能力强。
    在做项目方面有一定的基础和经验。<br><br>
    小组成员动手能力很强，思维敏捷，敢于吃苦，
    会往深处学，并且学习成绩优秀、均拥有Java基础，动手能力很强，
    而且对于Java方面的知识掌握的十分熟练。<br><br>这下面是联系我们的方式(微信扫码)：<br>

    <img th:src="@{/images/lianxiMe.jpg}"/>
</div>

<!--主界面-->
<div id="mainBox" style="position:relative;">
    <!--背景音乐-->
    <div>
        <span class="glyphicon glyphicon-volume-up" id="bgmup" style="font-size: 25px; position: absolute; left: 50px; top: 25px"></span>
        <span class="glyphicon glyphicon-volume-off" id="bgmoff" style="font-size: 25px; position: absolute; left: 50px; top: 25px; display: none;"></span>
    </div>
    <div id="nav">
        <div class="logo">
            <img th:src="@{/images/mainlogo.png}"/>
        </div>
        <div class="user">
            <span class="welcome">欢迎：JackTxf</span>
            <a th:href="@{/player/MyInfo}">
            <span class="usertouxiang tomyself">
						<img style="width: 50px;height: 50px;vertical-align: middle;" th:src="@{/images/user.png}" />
					</span>
            </a>
        </div>
    </div>

    <div id="play">
        <ul  class="first">
            <li class="firstmenu">人机对抗
                <ul class="second">
                    <li><a th:href="@{/player/alone}">四人游戏</a></li>
                </ul>
            </li>
            <li class="firstmenu">网络对局
                <ul class="second">
                    <li><a th:href="@{/olchess}">四人游戏</a></li>
                </ul>
            </li>
            <li class="firstmenu">上流人士玩的
                <ul class="second">
                    <li><a th:href="@{/computerplayer}">编译算法</a></li>
                    <li><a th:href="@{/compileonline}">四人算法对战</a></li>
                    <li>正在研究</li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li class="firstmenu">游戏说明
                <ul class="second">
                    <li class="gameRule">游戏规则</li>
                    <li class="gameDe">开发人员</li>
                </ul>
            </li>
            <li class="firstmenu">选项
                <ul class="second">
                    <li><a th:href="@{/player/logout}">退出游戏</a></li>
                    <li>注销账号</li>
                </ul>
            </li>

        </ul>
    </div>
</div>


<div id="chat" style=" border:1px solid black; padding: 10px; margin: 5px;width: 250px;height: 500px; position:absolute; top: 0px; right: 0px;">

    <br/>
    <div style="margin: auto;text-align: center">
        <select id="onLineUser">
            <option>--所有--</option>
        </select>
        <input id="text" type="text" />
        <button onclick="send()">发送消息</button>
    </div>
    <br>
    <div style="margin-right: 10px;text-align: right">
        <button onclick="closeWebSocket()">关闭连接</button>
    </div>
    <hr/>
    <div id="message" style="text-align: center;"></div>
    <input  type="text"  id="username" style="display: none" />
</div>
</body>

<script type="text/javascript" th:src="@{/js/main.js}"></script>
<script>
    //var audio =$('#bgm') ;//jQuery对象
    var audio = document.getElementById('bgm');
    //var au=audio.get(0); //DOM对象
    audio.volume = 0.1;


    $("#bgmup").click(function () {
        var audio =$('#bgm') ;//jQuery对象
        var au=audio.get(0); //DOM对象
        au.pause();
        $("#bgmup").css("display","none");
        $("#bgmoff").css("display","inline-block");
    });

    $("#bgmoff").click(function () {
        var audio =$('#bgm') ;//jQuery对象
        var au=audio.get(0); //DOM对象
        au.play();
        $("#bgmoff").css("display","none");
        $("#bgmup").css("display","inline-block");
    });


    var s = sessionStorage.getItem("player");
    var username = s;
    // alert(s);
    $(".welcome").text("欢迎："+s);

    var webSocket;
    var commWebSocket;
    if ("WebSocket" in window)
    {
        webSocket = new WebSocket("ws://localhost:8081/websocket/"+s);

        //连通之后的回调事件
        webSocket.onopen = function()
        {
            //webSocket.send( document.getElementById('username').value+"已经上线了");
            console.log("已经连通了websocket");
            setMessageInnerHTML("已经连通了websocket");
        };

        //接收后台服务端的消息
        webSocket.onmessage = function (evt)
        {
            var received_msg = evt.data;
            console.log("数据已接收:" +received_msg);
            var obj = JSON.parse(received_msg);
            console.log("可以解析成json:"+obj.messageType);
            //1代表上线 2代表下线 3代表在线名单 4代表普通消息
            if(obj.messageType==1){
                //把名称放入到selection当中供选择
                var onlineName = obj.username;
                var option = "<option>"+onlineName+"</option>";
                $("#onLineUser").append(option);
                setMessageInnerHTML(onlineName+"上线了");
            }
            else if(obj.messageType==2){
                $("#onLineUser").empty();
                var onlineName = obj.onlineUsers;
                var offlineName = obj.username;
                var option = "<option>"+"--所有--"+"</option>";
                for(var i=0;i<onlineName.length;i++){
                    if(!(onlineName[i]==username)){
                        option+="<option>"+onlineName[i]+"</option>"
                    }
                }
                $("#onLineUser").append(option);

                setMessageInnerHTML(offlineName+"下线了");
            }
            else if(obj.messageType==3){
                var onlineName = obj.onlineUsers;
                var option = null;
                for(var i=0;i<onlineName.length;i++){
                    if(!(onlineName[i]==s)){
                        option+="<option>"+onlineName[i]+"</option>"
                    }
                }
                $("#onLineUser").append(option);
                console.log("获取了在线的名单"+onlineName.toString());
            }
            else{
                setMessageInnerHTML(obj.fromusername+"对"+obj.tousername+"说："+obj.textMessage);
            }
        };

        //连接关闭的回调事件
        webSocket.onclose = function()
        {
            console.log("连接已关闭...");
            setMessageInnerHTML("连接已经关闭....");
        };
    }
    else{
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
    }
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    function closeWebSocket() {
        //直接关闭websocket的连接
        webSocket.close();
    }

    function send() {
        var selectText = $("#onLineUser").find("option:selected").text();
        if(selectText=="--所有--"){
            selectText = "All";
        }
        else{
            setMessageInnerHTML(username+"对"+selectText+"说："+ $("#text").val());
        }
        var message = {
            "message":document.getElementById('text').value,
            "username": username,
            "to":selectText
        };
        webSocket.send(JSON.stringify(message));
        $("#text").val("");

    }
</script>
</html>
